<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/top.jsp" %>

<div id="Catalog">
    <div id="tab" class="tab">
        <ul id='ul'>
            <li id="first" class="active">新建订单</li>
            <!-- 选项1为默认选中状态 -->
            <li id="second">修改信息</li>
            <li id="third">确认订单</li>
        </ul>
        <div id="od" class="cont" style="display: block;">
            <form action="#" method="post" id="newOrder">
                <table>
                    <tr>
                        <th colspan=2>Payment Details</th>
                    </tr>
                    <tr>
                        <td>Card Type:</td>
                        <td><select name="cardType">
                            <option>
                                ${sessionScope.order.cardType}
                            </option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>Card Number:</td>
                        <td><input type="text" name="creditCard" value="${sessionScope.order.creditCard}"/> * Use a fake
                            number!
                        </td>
                    </tr>
                    <tr>
                        <td>Expiry Date (MM/YYYY):</td>
                        <td><input type="text" name="expiryDate" value="${sessionScope.order.expiryDate}"/></td>
                    </tr>
                    <tr>
                        <th colspan=2>Billing Address</th>
                    </tr>

                    <tr>
                        <td>First name:</td>
                        <td><input type="text" name="billToFirstName" value="${sessionScope.order.billToFirstName}" class="bill"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type="text" name="billToLastName" value="${sessionScope.order.billToLastName}" class="bill"/></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type="text" size="40" name="billAddress1" value="${sessionScope.order.billAddress1}" class="bill"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type="text" size="40" name="billAddress2" value="${sessionScope.order.billAddress2}" class="bill"/>
                        </td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type="text" name="billCity" value="${sessionScope.order.shipCity}" class="bill"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type="text" size="4" name="billState" value="${sessionScope.order.shipState}" class="bill"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type="text" size="10" name="billZip" value="${sessionScope.order.shipZip}" class="bill"/></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type="text" size="15" name="billCountry" value="${sessionScope.order.shipCountry}" class="bill"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan=2><input type="checkbox" id="shippingAddressRequired" name="shippingAddressRequired"/>
                            Ship to different address...
                        </td>
                    </tr>
                </table>
                <input type="submit" name="newOrder" value="Continue"/>
            </form>
        </div>
        <!-- 内容一为默认显示状态，其他内容均隐藏 -->
        <div id="sp" class="cont">
            <form action="#" method="post" id="shippingAddress">
                <table>
                    <tr>
                        <th colspan=2>Shipping Address</th>
                    </tr>
                    <c:if test="${requestScope.msg != null}">
                        <p><font color="red">${requestScope.msg}</font></p>
                    </c:if>
                    <tr>
                        <td>First name:</td>
                        <td><input type="text" id="shipToFirstName" name="shipToFirstName" class="ship"/></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><input type="text" id="shipToLastName" name="shipToLastName" class="ship"/></td>
                    </tr>
                    <tr>
                        <td>Address 1:</td>
                        <td><input type="text" size="40" id="shipAddress1" name="shipAddress1" class="ship"/></td>
                    </tr>
                    <tr>
                        <td>Address 2:</td>
                        <td><input type="text" size="40" id="shipAddress2" name="shipAddress2" class="ship"/></td>
                    </tr>
                    <tr>
                        <td>City:</td>
                        <td><input type="text" id="shipCity" name="shipCity" class="ship"/></td>
                    </tr>
                    <tr>
                        <td>State:</td>
                        <td><input type="text" size="4" id="shipState" name="shipState" class="ship"/></td>
                    </tr>
                    <tr>
                        <td>Zip:</td>
                        <td><input type="text" size="10" id="shipZip" name="shipZip" class="ship"/></td>
                    </tr>
                    <tr>
                        <td>Country:</td>
                        <td><input type="text" size="15" id="shipCountry" name="shipCountry" class="ship"/></td>
                    </tr>
                </table>

                <input type="submit" name="newOrder" value="Continue"/>
            </form>
        </div>
        <div id="cf" class="cont">
            <table id="newAddress">
                <tr>
                    <th align="center" colspan="2"><font size="4"><b>Order</b></font>
                        <br/>
                        <font size="3"><b> <fmt:formatDate
                                value="${sessionScope.order.orderDate}" pattern="yyyy/MM/dd hh:mm:ss"/></b></font>
                    </th>
                </tr>
                <tr>
                    <th colspan="2">Billing Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td><c:out value="${sessionScope.order.billToFirstName}"/></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><c:out value="${sessionScope.order.billToLastName}"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><c:out value="${sessionScope.order.billAddress1}"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><c:out value="${sessionScope.order.billAddress2}"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><c:out value="${sessionScope.order.billCity}"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><c:out value="${sessionScope.order.billState}"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><c:out value="${sessionScope.order.billZip}"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><c:out value="${sessionScope.order.billCountry}"/></td>
                </tr>
                <tr>
                    <th colspan="2">Shipping Address</th>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td class="newS"></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td class="newS"></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td class="newS"></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td class="newS"></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td class="newS"></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td class="newS"></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td class="newS"></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td class="newS"></td>
                </tr>

            </table>
            <a href="viewOrder?userId=${loginAccount.username}" class="Button">Confirm</a>
        </div>
    </div>
</div>

<%@ include file="../common/bottom.jsp" %>